<template>
  <view class="page">
    <!--		未绑定手机号码-->
    <!--    <view class="header" v-if="!userInfo.phone" @click="checkBindPhone()">-->
    <!--      <view class="left">-->
    <!--        <image class="avatar" :src="avatarIcon"></image>-->
    <!--        <view class="right">-->
    <!--          <view class="nickName">未登录</view>-->
    <!--        </view>-->
    <!--      </view>-->
    <!--      <image class="right" :src="rightArrowIcon"></image>-->
    <!--    </view>-->
    <!--		已绑定 手机号码-->
    <!--    <view class="header" v-else @click="$uni.navigateTo({ url: '/pages/mine/info/index' })">-->
    <view class="header" @click="$uni.navigateTo({ url: '/pages/mine/info/index' })">
      <view class="left">
        <!--			头像-->
        <image class="avatar" v-if="userInfo.userIcon" :src="staticUrl + userInfo.userIcon"></image>
        <view class="avatar-text avatar" v-else>{{ userInfo.nickName[0] }}</view>
        <view class="right">
          <!-- 昵称 -->
          <view class="nickName">{{ userInfo.nickName }}</view>
          <!--				会员等级-->
          <view class="vip-level" v-if="openIosPay && !isSimpleApp">
            <view class="vip-text" v-if="userInfo.memberInfo">{{
              `${userInfo.memberInfo.memberProName} - ${userInfo.memberInfo.expireDate} 到期`
            }}</view>
            <view class="vip-text" v-else>未开通会员</view>
          </view>
        </view>
      </view>
      <image class="right" :src="rightArrowIcon"></image>
    </view>
    <!--		开通会员-->
    <view 
			class="vip-banner" 
			@click="() => $uni.navigateTo({ url: '/pages/mine/vipList' })" 
			v-if="userInfo && openIosPay && !isSimpleApp"
		>
      <image class="icon" :src="getShowNginxPicUrl('75639133392f1cb566c03a22cda21aaf8629314f1fa0a-9F8oIx@2x.png')"></image>
      <!--			还未开通会员-->
      <template v-if="!userInfo.memberInfo">
        <view class="text">开通上岸VIP,学习事半功倍</view>
        <view class="btn">
          <text>立即开通</text>
        </view>
      </template>
      <!--			已经开通了会员-->
      <template v-else>
        <view class="text">
          <text>您的会员还有\t</text>
          <text style="font-weight: bold; color: #cb4c37">{{
            dateUtils.moment.calculateDateIntervalDays(moment(), moment(userInfo.memberInfo.endTime)) + 1
          }}</text>
          <text>\t天到期</text>
        </view>
        <view class="btn">
          <text>立即续费</text>
        </view>
      </template>
    </view>
    <!--		今日学习日志-->
    <!--			暂时注释掉，勿删-->
    <view class="block" v-if="learningLogInfo">
      <view class="header">
        <view class="title">
          <view class="point"></view>
          <view class="text">今日学习日志</view>
        </view>
        <view class="study-days">
          <text class="text">连续学习</text>
          <text class="count">{{ " " + learningLogInfo.continueDay + " " }}</text>
          <text class="text">天</text>
        </view>
      </view>
      <view class="content">
        <view class="item divide_4">
          <view class="title">
            <text class="number">{{ dateUtils.formatTimeObject(learningLogInfo.currentDayDuration).m }}</text>
            <text>min</text>
          </view>
          <view class="text">今日学习</view>
        </view>
        <view class="item divide_4">
          <view class="title">
            <text class="number">{{ dateUtils.formatTimeObject(learningLogInfo.brushWordsDuration).m }}</text>
            <text>min</text>
          </view>
          <view class="text">单词打卡</view>
        </view>
        <view class="item divide_4">
          <view class="title">
            <text class="number">{{ dateUtils.formatTimeObject(learningLogInfo.brushQuestionsDuration).m }}</text>
            <text>min</text>
          </view>
          <view class="text">刷题学习</view>
        </view>
        <view class="item divide_4">
          <view class="title">
            <text class="number">{{ learningLogInfo.userCheckTotalDayNum }}</text>
            <text>天</text>
          </view>
          <view class="text">累计学习</view>
        </view>
        <!--        <view class="item divide_4">-->
        <!--          <view class="title">{{ learningLogInfo.courseDuration + ' ' }}min</view>-->
        <!--          <view class="text">课程学习</view>-->
        <!--        </view>-->
      </view>
    </view>
    <!--		我的学习-->
    <view class="block">
      <view class="header">
        <view class="title">
          <view class="point"></view>
          <view class="text">我的学习</view>
        </view>
      </view>
      <view class="content">
        <view class="item divide_4" @click="() => $uni.navigateTo({ url: '/mine/pages/learningLog/index' })">
          <image class="icon" :src="calendarIcon"></image>
          <view class="text">学习日志</view>
        </view>
        <view class="item divide_4" @click="() => $uni.navigateTo({ url: '/vocabulary/pages/myVocabularyBook/index' })">
          <image class="icon" :src="wordBookIcon"></image>
          <view class="text">我的单词</view>
        </view>
        <view class="item divide_4" @click="() => $uni.navigateTo({ url: '/mine/pages/collection/index' })">
          <image class="icon" :src="collectionIcon"></image>
          <view class="text">我的收藏</view>
        </view>
        <view class="item divide_4" @click="() => $uni.navigateTo({ url: '/mine/pages/task/index' })">
          <image class="icon" :src="taskIcon"></image>
          <view class="text">作业任务</view>
        </view>
        <view class="item divide_4" @click="() => $uni.navigateTo({ url: '/pages/mine/myDoingRecord/topicClassChoice/index' })">
          <image class="icon" :src="doingRecordIcon"></image>
          <view class="text">我的刷题</view>
        </view>
        <view class="item divide_4" @click="() => $uni.navigateTo({ url: '/mine/pages/wrongTopicList/topicClassChoice/index' })">
          <image class="icon" :src="myWrongTopicIcon"></image>
          <view class="text">错题合集</view>
        </view>
      </view>
    </view>

    <view class="menu-list">
      <view class="menu-item" @click="menuClick('/markingCampaign/pages/invite/index')">
        <image class="icon" :src="shareIcon"></image>
        <view class="text">分享有礼</view>
        <image class="right-arrow-icon" :src="rightArrowIcon"></image>
      </view>
      <view class="menu-item" @click="menuClick('/pages/mine/vipList')" v-if="!isSimpleApp && openIosPay">
        <image class="icon" :src="vipCenterIcon"></image>
        <view class="text">会员中心</view>
        <image class="right-arrow-icon" :src="rightArrowIcon"></image>
      </view>
      <view class="menu-item" @click="menuClick('/pages/mine/orderList/index')">
        <image class="icon" src="/static/mine/menu_1.png"></image>
        <view class="text">我的订单</view>
        <image class="right-arrow-icon" :src="rightArrowIcon"></image>
      </view>
      <!--      <view class="menu-item" @click="menuClick('/markingCampaign/pages/redeemCodeRedemption/index')">-->
      <!--        <image class="icon" :src="redemptionIcon"></image>-->
      <!--        <view class="text">兑换码兑换</view>-->
      <!--        <image class="right-arrow-icon" :src="rightArrowIcon"></image>-->
      <!--      </view>-->
      <view class="menu-item" @click="menuClick('/pages/mine/feedback/index')">
        <image class="icon" :src="feedbackIcon"></image>
        <view class="text">用户反馈</view>
        <image class="right-arrow-icon" :src="rightArrowIcon"></image>
      </view>
      <view class="menu-item" @click="() => $refs.contractKeFu.open()">
        <image class="icon" :src="kefuIcon"></image>
        <view class="text">客服咨询</view>
        <image class="right-arrow-icon" :src="rightArrowIcon"></image>
      </view>
      <!--      <view class="menu-item" @click="menuClick('/markingCampaign/pages/recommender/index')">-->
      <!--        <image class="icon" src="/static/mine/menu_3.png"></image>-->
      <!--        <view class="text">推荐官</view>-->
      <!--        <image class="right-arrow-icon" :src="rightArrowIcon"></image>-->
      <!--      </view>-->
      <!--      &lt;!&ndash;			只有用户的角色为分销员时才展示&ndash;&gt;-->
      <!--      <view class="menu-item" @click="menuClick('/markingCampaign/pages/distribution/index')" v-if="userInfo.distributionType !== '-1'">-->
      <!--        <image class="icon" src="/static/mine/menu_4.png"></image>-->
      <!--        <view class="text">我的分销</view>-->
      <!--        <image class="right-arrow-icon" :src="rightArrowIcon"></image>-->
      <!--      </view>-->
    </view>

    <contractKeFu ref="contractKeFu"></contractKeFu>
    <customTabbar></customTabbar>
  </view>
</template>

<script>
import { handleUrlParams, showToast } from "../../utils/index"
import { getShowNginxPicUrl, getStaticUrl } from "@/utils/settings"
import avatarIcon from "./assets/avatar.png"
import store from "../../store"
import { userActionType } from "@/store/modules/user"
import journalIcon from "./assets/menu/journal.png"
import redemptionIcon from "./assets/menu/redemption.png"
import shareInfo from "../../utils/shareInfo"
import feedbackIcon from "./assets/menu/feedback.png"
import kefuIcon from "./assets/menu/kefu.png"
import myCollectionIcon from "./assets/menu/myCollection.png"
import rightArrowIcon from "./assets/rightArrow.png"
import calendarIcon from "./assets/calendar.png"
import wordBookIcon from "./assets/wordBook.png"
import { dictActionType } from "@/store/modules/dict"
import shareIcon from "./assets/share.png"
import request from "../../utils/request"
import collectionIcon from "./assets/collection.png"
import contractKeFu from "../../components/contractKeFu/index.vue"
import vipCenterIcon from "./assets/menu/vip-center.png"
import taskIcon from "./assets/menu/task.png"
import doingRecordIcon from "./assets/menu/doing-record.png"
import dateUtils from "@/utils/dateUtils"
import websocket from "@/utils/websocket"
import myWrongTopicIcon from "./assets/menu/myWrongTopic.png"
import moment from "@/lib/moment.min"
import pay from "@/utils/pay"
import customTabbar from "@/components/customTabbar/index.vue"
import { isSimpleApp } from "../../utils/index"

export default {
  computed: {
    dateUtils() {
      return dateUtils
    },
  },
  data() {
    return {
      userInfo: null,
      staticUrl: getStaticUrl(),
      avatarIcon,
      journalIcon,
      redemptionIcon,
      feedbackIcon,
      kefuIcon,
      myCollectionIcon,
      rightArrowIcon,
      calendarIcon,
      wordBookIcon,
      shareIcon,
      learningLogInfo: null, //学习日志统计
      collectionIcon,
      vipCenterIcon,
      taskIcon,
      doingRecordIcon,
      myWrongTopicIcon,
      moment,
      openIosPay: true,
      isSimpleApp: false,
    }
  },
  components: { contractKeFu, customTabbar },
  async onShow() {
    websocket.trackCurrentPage("我的").catch(() => {})
    uni.showLoading({
      title: "加载中",
      mask: true,
    })
    Promise.all([
      store.dispatch(userActionType.action.userInfo).then((data) => {
        this.userInfo = data
      }),
      //获取学习日志统计信息
      request({
        url: "userLearningLogs/getUserLearningLogsDuration",
      }).then((data) => {
        this.learningLogInfo = data
      }),
      //检查是否有开启ios支付
      pay.checkIosPay().then((res) => {
        this.openIosPay = res
      }),
      //判断是否要开启精简app
      isSimpleApp().then((res) => {
        this.isSimpleApp = res
      }),
    ])
      .catch((err) => {
        console.log(err, "err")
        showToast.default(err)
      })
      .finally(() => {
        uni.hideLoading()
      })
  },
  methods: {
    getShowNginxPicUrl,
    async menuClick(path, query) {
      const fullUrl = handleUrlParams(path, query)
      uni.navigateTo({
        url: fullUrl,
      })
    },
  },
  async onShareAppMessage() {
    return await shareInfo.getDefaultShareInfo()
  },
}
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: url("https://kou.gdzmtech.com/pic/tdtJskhUbwZzaGkRv4cc.png") no-repeat;
  background-size: 100% 100%;
  padding-bottom: calc(152rpx + env(safe-area-inset-bottom));
  > .header {
    padding: {
      top: calc(148rpx + var(--status-bar-height));
      bottom: 30rpx;
      left: 46rpx;
      right: 46rpx;
    }
    display: flex;
    align-items: center;
    justify-content: space-between;
    > .left {
      display: flex;
      align-items: center;
      > .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
      }
      > .avatar-text {
        background: #3c3c3c;
        font-size: 44rpx;
        color: #fff;
        line-height: 105rpx;
        text-align: center;
      }
      > .right {
        display: flex;
        flex-direction: column;
        margin-left: 20rpx;
        > .nickName {
          font-size: 36rpx;
          font-weight: 600;
          color: #333333;
        }
        > .vip-level {
          margin-top: 4rpx;
          > .vip-text {
            font-size: 26rpx;
            color: #999999;
          }
        }
      }
    }
    > .right {
      width: 30rpx;
      height: 30rpx;
    }
  }
  > .vip-banner {
    margin: 0 46rpx;
    padding: 0 30rpx;
    height: 108rpx;
    border-radius: 54rpx;
    background: #ffd658;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .icon {
      width: 92rpx;
      height: 86rpx;
    }
    .text {
      font-weight: 500;
      color: #4e2d00;
      font-size: 28rpx;
    }
    .btn {
      width: 142rpx;
      height: 58rpx;
      background: #fff9e6;
      border-radius: 56rpx 56rpx 56rpx 56rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #4e2d00;
    }
  }
  > .block {
    background: white;
    margin: 28rpx;
    padding: 28rpx 34rpx;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      > .title {
        display: flex;
        align-items: center;
        .point {
          width: 16rpx;
          height: 16rpx;
          background: var(--theme-color);
          border-radius: 50%;
        }
        .text {
          margin-left: 12rpx;
          font-size: 32rpx;
          font-weight: 500;
        }
      }
      .study-days {
        .text {
          font-size: 30rpx;
          color: #4e2d00;
        }
        .count {
          font-size: 36rpx;
          color: var(--theme-color);
        }
      }
    }
    .content {
      display: flex;
      flex-wrap: wrap;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 34rpx;
        &.divide_3 {
          width: 33.3%;
        }
        &.divide_4 {
          width: 25%;
        }
        > .icon {
          width: 56rpx;
          height: 56rpx;
          margin-bottom: 14rpx;
        }
        > .title {
          font-weight: 500;
          font-size: 28rpx;
          margin-bottom: 4rpx;
          .number {
            font-size: 36rpx;
          }
        }
        > .text {
          color: #666666;
          font-size: 28rpx;
        }
      }
    }
  }
}

.menu-list {
  margin: 28rpx;
  padding: 0 36rpx;
  background: white;
  border-radius: 40rpx 40rpx 40rpx 40rpx;

  .menu-item {
    height: 112rpx;
    display: flex;
    align-items: center;

    .icon {
      width: 42rpx;
      height: 42rpx;
    }

    .text {
      margin-left: 24rpx;
      font-size: 30rpx;
      color: #333333;
      width: 0;
      flex: 1;
    }

    .right-arrow-icon {
      height: 28rpx;
      width: 26rpx;
    }
  }
}
</style>
